<template>
  <view class="goods_detail">
    <swiper class="detail_swiper" autoplay circular indicator-dots>
      <swiper-item v-for="item in goodDetail.pics" :key="item.pics_id"
        @click="clickPrevewImage(item.pics_mid)">
        <image mode="widthFix" :src="item.pics_mid"></image>
      </swiper-item>
    </swiper>

    <view class="goods_price">￥{{ goodDetail.goods_price }}</view>
    <view class="goods_name_row">
      <view class="goods_name">
        {{ goodDetail.goods_name }}{{ goodDetail.goods_name }}
      </view>
      <view class="goods_collect" @click="clickCollect">
        <text
          :class="['iconfont', isCollect ? 'icon-collect' : 'icon-collect1']"></text>
        <view class="collect_text">收藏</view>
      </view>
    </view>

    <view class="goods_info">
      <view class="goods_info_title">图文详情</view>
      <view class="goods_info_content">
        <!-- 富文本 -->
        <rich-text :nodes="goodDetail.goods_introduce"></rich-text>
      </view>
    </view>

    <view class="btm_tool">
      <view class="tool_item">
        <view class="iconfont icon-kefu"></view>
        <view>客服</view>
        <button open-type="contact"></button>
      </view>
      <view class="tool_item">
        <view class="iconfont icon-fenxiang"></view>
        <view>分享</view>
        <button open-type="share"></button>
      </view>
      <navigator open-type="switchTab" url="/pages/tabBar/cart/cart"
        class="tool_item">
        <view class="iconfont icon-changyongtubiao-fuben-58"></view>
        <view>购物车</view>
      </navigator>
      <view class="tool_item btn_cart" @click="clickCartAdd"> 加入购物车 </view>
      <view class="tool_item btn_buy"> 立即购买 </view>
    </view>
  </view>
</template>

<script>
  import {
    getStorage,
    setStorage
  } from "../../api/Storage.js"
  import {
    showToast
  } from "../../utils/util"
  export default {
    data() {
      return {
        goodDetail: {},
        // 商品是否被收藏
        isCollect: false,
      }
    },
    methods: {
      // 点击 加入购物车
      clickCartAdd() {
        // 1 获取缓存中的购物车 数组
        let cart = getStorage("cart") || []
        // 2 判断 商品对象是否存在于购物车数组中
        let index = cart.findIndex((v) => v.goods_id === this.goodDetail
          .goods_id)
        if (index === -1) {
          //3  不存在 第一次添加
          this.goodDetail.num = 1
          this.goodDetail.checked = true
          cart.push(this.goodDetail)
        } else {
          // 4 已经存在购物车数据 执行 num++
          cart[index].num++
        }
        // 5 把购物车重新添加回缓存中
        setStorage("cart", cart)
        // 6 弹窗提示
        showToast({
          title: "加入成功",
          icon: "success",
          mask: true,
        })
      },
      // 点击 商品收藏图标
      clickCollect() {
        let isCollect = false
        // 1 获取缓存中的商品收藏数组
        let collect = getStorage("collect") || []
        // 2 判断该商品是否被收藏过
        let index = collect.findIndex(
          (v) => v.goods_id === this.goodDetail.goods_id
        )
        // 3 当index！=-1表示 已经收藏过
        if (index > -1) {
          // 能找到 已经收藏过了  在数组中删除该商品
          collect.splice(index, 1)
          isCollect = false
          showToast({
            title: "取消成功",
            icon: "success",
            mask: true,
          })
        } else {
          // 没有收藏过
          collect.push(this.goodDetail)
          isCollect = true
          showToast({
            title: "收藏成功",
            icon: "success",
            mask: true,
          })
        }
        // 4 把数组存入到缓存中
        setStorage("collect", collect)
        // 5 修改data中的属性  isCollect
        this.isCollect = isCollect
      },
      // 点击轮播图 放大预览
      clickPrevewImage(e) {
        // 1 先构造要预览的图片数组
        const urls = this.goodDetail.pics.map((v) => v.pics_mid)
        // 2 接收传递过来的图片url
        const current = e
        uni.previewImage({
          current,
          urls,
          indicator: "number",
        })
      },
    },
    onLoad(options) {
      this.$http({
        url: "/goods/detail",
        method: "GET",
        data: {
          goods_id: options.goods_id,
        },
      }).then((res) => {
        res.goods_introduce = res.goods_introduce.replace(/\.webp/g,
          ".jpg")
        this.goodDetail = res
        // 1 获取缓存中的商品收藏的数组
        let collect = getStorage("collect") || []
        // 2 判断当前商品是否被收藏
        this.isCollect = collect.some((v) => v.goods_id === res.goods_id)
        let historyList = getStorage('historyList') || []
        historyList.forEach((v, i) => {
          if (v.goods_id === res.goods_id) {
            historyList.splice(i, 1)
          }
        })
        historyList.unshift(res)
        setStorage('historyList', historyList)
      })
    },
  }
</script>

<style lang="scss">
  .goods_detail {
    .detail_swiper {
      height: 65vw;
      text-align: center;
    }

    .goods_price {
      padding: 15upx;
      font-size: 32upx;
      font-weight: 600;
      color: #eb4450;
    }

    .goods_name_row {
      border-top: 5upx solid #dedede;
      border-bottom: 5upx solid #dedede;
      padding: 10upx 0;
      display: flex;

      .goods_name {
        flex: 5;
        color: #000;
        font-size: 30upx;
        padding: 0 10upx;

        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }

      .goods_collect {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border-left: 1upx solid #000;

        .icon-collect {
          color: orangered;
        }
      }
    }

    .goods_info {
      .goods_info_title {
        font-size: 32upx;
        color: var(--themeColor);
        font-weight: 600;
        padding: 20upx;
      }
    }

    .btm_tool {
      border-top: 1upx solid #ccc;
      position: fixed;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 90upx;
      background-color: #fff;
      display: flex;

      .tool_item {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 24upx;
        position: relative;

        button {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          opacity: 0;
        }
      }

      .btn_cart {
        flex: 2;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color: #ffa500;
        color: #fff;
        font-size: 30upx;
        font-weight: 600;
      }

      .btn_buy {
        flex: 2;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color: #eb4450;
        color: #fff;
        font-size: 30upx;
        font-weight: 600;
      }
    }
  }
</style>
